<template>
	<view v-if="!isccccc">
		<view class="fixed">
			<image src="http://7n.gl.file.91golf.com/9e1752c9f2ad4e829f2ade13030d43ff.png" mode="widthFix"
				style="width: 100%;position: relative;"></image>
			<view class="status-bar text-whtite flex" :style="[{'top':statusBarHeight+'px'}]">
				<u-icon name="arrow-left" @click="back()"></u-icon>
				<view class="title">问答详情</view>
			</view>
			<view class="question-card">
				<view class="qes animation-fade" @click="copy(title.content)">{{title.content}}</view>
				<view class="info u-flex u-row-between animation-fade">
					<view>
						<img :src="title.createUserHread" alt="" class="avatar">
						<text class="nickname">{{title.createUserName}}</text>
						<text>{{getTimeFormat(title.createTime)}} 发布</text>
					</view>
					<view style="display: flex;position: relative;top: 4rpx;">
						<img :src="title.industryIcon" alt="" class="icon" style="width: 30rpx;" mode="widthFix">
						<view style="text-overflow: ellipsis;overflow:hidden;max-width:160rpx;white-space: nowrap;">
							{{title.industryName}}
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="question-all animation-fade">
					<view>全部问答 ({{arr.length}})</view>
					<view class="question-list" style="padding-bottom: 120rpx;">
						<view class="question-item " v-for="(item,index) in arr">
							<view class="u-flex" style="position: relative;">
								<view class="teacher">
									<image :src="item.createUserHread" class="photo"></image>
								</view>
								<view class="right-content">

									<view class="name" style="display: flex;">
										<view>{{item.createUserName}}</view>
										<image class="animation-fade" v-if="item.renzhenglaoshi"
											src="@/static/img/label-teacher-l.png" mode="widthFix"
											style="width: 100rpx;margin-left: 10rpx;margin-top: 10rpx;"></image>
									</view>

									<view style="line-height: 50rpx" class="teacher-qes" @click="copy(item.content)">{{item.content}}</view>
									<view class="answer-list">
										<view class="answer-item " v-for="(obj,findex) in item.cdestais"
											v-if="item.cdestais">
											<view class="u-flex u-row-between person">
												<view class="nickname">{{obj.createUserName}}</view>
												<view>{{getTimeFormat(obj.createTim)}}</view>
											</view>
											<view style="line-height: 50rpx" @click="copy(item.content)">{{obj.content}}</view>
											<view
												style="width:calc(100% );margin:10rpx 0rpx;height: 1px;background: #CFCFCF;">
											</view>
										</view>
										<view class="u-flex u-row-between qingkuang">
											<view>{{getTimeFormat(item.createTime)}}</view>
											<view style="position: absolute;right: 0;">
												<u-icon name="chat" color="#999999" size="30" @click="huida(item)">
												</u-icon>
												<text class="number">{{item.children?item.children.length:0}}</text>
												<u-icon name="heart" color="#999999" size="30"
													style="margin-left: 10rpx;" v-if="!item.mydz" @click="like(item,1)">
												</u-icon>
												<u-icon name="heart-fill" color="#e30000" size="30"
													style="margin-left: 10rpx;" v-if="item.mydz" @click="like1(item,1)">
												</u-icon>
												<text class="number number1">{{item.dianzan?item.dianzan:0}}</text>
											</view>
										</view>

										<!-- 子评论列表-start -->
										<view class="comment-sub-box">
											<view class="comment-sub-item" v-for="each in item.children">
												<view>
													<image :src="each.createUserHread" mode="aspectFill" class="avatar">
													</image>
												</view>
												<view class="comment-main">
													<view class="sub-comment-main-top">
														<view class="name" style="display: flex;">
															<view>{{each.createUserName}}</view>
															<image class="animation-fade" v-if="each.renzhenglaoshi"
																src="@/static/img/label-teacher-l.png" mode="widthFix"
																style="width: 100rpx;margin-left: 10rpx;margin-top: 10rpx;">
															</image>
														</view>
													</view>
													<view class="comment-main-content">
														<span v-if="each.huifuren"
															style="font-size: 20rpx;color: #999999;margin-right: 20rpx;">回复{{each.huifuren}}</span>{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}
														<span v-if="each.content.length > 60">
															{{each.hasShowMore ? each.content.slice(59) : '...'}}
															<span class="foot-btn" @click="showMore(each.id)">
																{{each.hasShowMore ? '收起' : '展开'}}
															</span>
														</span>
													</view>
													<view class="comment-main-foot" style="position: relative;">
														<view class="foot-time">{{getTimeFormat(each.createTim)}}</view>
														<view style="position: absolute;right: 50rpx;">
															<u-icon name="chat" color="#999999" size="30"
																@click="huidazi(item,each)"></u-icon>
															<!-- <text class="number">{{item.cdestais?item.cdestais.length:0}}</text> -->
															<u-icon name="heart" color="#999999" size="30"
																style="margin-left: 10rpx;" v-if="!each.mydz"
																@click="like(each,1)"></u-icon>
															<u-icon name="heart-fill" color="#e30000" size="30"
																style="margin-left: 10rpx;" v-if="each.mydz"
																@click="like1(each,1)">
															</u-icon>
															<text class="number number1"
																style="color: #999999;margin-left: 10rpx;">{{each.dianzan?each.dianzan:0}}</text>
														</view>
														<!-- <view class="foot-btn" v-if="each.owner" @click="confirmDelete(each.id)">删除
														</view> -->
													</view>
												</view>
											</view>
										</view>
										<!-- 子评论列表-end -->
									</view>

								</view>

							</view>


						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 新增评论-start -->
		<view class="comment-submit-box " v-if="submit" @click="closeInput">
			<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
			<view class="comment-add animation-slide-bottom" @click.stop.prevent="stopPrevent"
				:style="'bottom:' + KeyboardHeight + 'px'">
				<view class="comment-submit">
					<view class="btn-click cancel" @click="closeInput">取消</view>
					<view>
						<view class="replayTag" v-show="showTag">
							<view>回复 {{pUser}}</view>
							<!-- <view @click="tagClose" class="replyTagClose">×</view> -->
						</view>
					</view>
					<view>
						<view class="btn-click" @click="add">发布</view>
					</view>
				</view>
				<textarea class="textarea" v-model="content" :placeholder="placeholder" :adjust-position="false"
					:show-confirm-bar="false" @blur="blur" @focus="focusOn" :focus="focus" maxlength="800"></textarea>
			</view>
		</view>
		<!-- 新增评论-end -->
		<view class="tabbar grid col-3 text-center " v-if="!submit && isAnswer && title"
			:class='[submit?"animation-slide-bottom animation-reverse":"animation-slide-bottom"]'>
			<view class="action" style="position: relative;">
				<u-icon name="zhuanfa" color="#333333" size="30"></u-icon>
				<text class="wenzi">转发</text>
				<button class="bf_input_down"
					style="width: 100%;height: 100rpx;background: transparent;position: absolute;right: 0;top: -30rpx;border: solid #fff 0px;"
					open-type="share"></button>
			</view>
			<view class="action action1" @click="huida()">
				<u-icon name="chat" color="#333333" size="32"></u-icon>
				<text class="wenzi">回复</text>
			</view>
			<view class="action" @click="like('',0)">
				<u-icon name="heart" color="#333333" size="32" v-if="!title.mydz"></u-icon>
				<u-icon name="heart-fill" color="#e30000" size="32" v-if="title.mydz"></u-icon>
				<text class="wenzi">{{title && title.dianzan?title.dianzan:0}}赞</text>
			</view>
		</view>
		<view class="tabbar grid col-2 text-center " v-if="!submit && !isAnswer && title"
			:class='[submit?"animation-slide-bottom animation-reverse":"animation-slide-bottom"]'>
			<view class="action" style="position: relative;">
				<u-icon name="zhuanfa" color="#333333" size="30"></u-icon>
				<text class="wenzi">转发</text>
				<button class="bf_input_down"
					style="width: 100%;height: 100rpx;background: transparent;position: absolute;right: 0;top: -30rpx;border: solid #fff 0px;"
					open-type="share"></button>

			</view>

			<view class="action" @click="like('',0)">
				<u-icon name="heart" color="#333333" size="32" v-if="!title.mydz"></u-icon>
				<u-icon name="heart-fill" color="#e30000" size="32" v-if="title.mydz"></u-icon>
				<text class="wenzi">{{title && title.dianzan?title.dianzan:0}}赞</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http,
		Method
	} from "@/utils/request.js";
	import storage from "@/utils/storage.js";
	import moment from 'dayjs';
	import hbComment from "./hb-comment/hb-comment"
	export default {
		components: {
			hbComment
		},
		data() {
			return {
				leavel: 0,
				statusBarHeight: 0,
				isAnswer: true,
				content: "",
				pUser: "",
				"KeyboardHeight": 0, // 键盘高度
				submit: false,
				id: null,
				load: true,
				pid: null,
				title: {

				},
				arr: [],
				isccccc: true,
			};
		},
		mounted: function() {
			uni.onKeyboardHeightChange(res => {
				this.KeyboardHeight = res.height;
			})
		},
		async onLoad(options) {
			this.isccccc = uni.getStorageSync("isccccc");
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			let user = storage.getUserInfo();
			// if (user) {
			// 	this.isAnswer - user.isAnswer;
			// }
			this.id = options.id
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			if(user){
				uni.showShareMenu({
				
				})
			}
			
		},
		async onShow() {
			let that = this;
			if (this.$options.filters.isLogin("auth")) {
				await this.getDetail()
			} else {
				uni.showModal({
					title: "提示",
					content: "检测到您的账号还未登录,是否去登录？",
					confirmColor: this.$lightColor,
					success: function(res) {
						if (res.confirm) {
							that.$options.filters.navigateToLogin();
						} else if (res.cancel) {
							uni.navigateBack();
						}
					},
				});
			}
		},
		onReady() {
			uni.hideLoading()
		},

		async onPullDownRefresh() {
			await this.getDetail();
			uni.stopPullDownRefresh()
		},
		onShareAppMessage() {
			let user = storage.getUserInfo();
			let path = `/pages/verticalnav/question-detail?id=${this.id}`;
			console.log("onShareAppMessage111111111111111111111111111111111111111111", path)
			return {
				title: this.title.content,
				path: path
			};
		},
		methods: {
			copy(val) {
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.showToast({
							title: "复制成功",
							icon: "none",
						});
					},
				});
			},
			async like(item, type) {

				let user = storage.getUserInfo();

				uni.showLoading({
					title: "操作中",
					mask: true
				})
				let params = {
					questionsId: type == 0 ? this.id : item.id,
					type,
					userId: user.id
				}


				let res = {}
				if (this.title.mydz) {
					let ids = [this.title.mydz]
					res = await http.request({
						url: "/lili/liQuestionsFabulous/" + ids,
						method: Method.DELETE,
						needToken: true,
						params
					});
				} else {
					res = await http.request({
						url: "/lili/liQuestionsFabulous",
						method: Method.POST,
						needToken: true,
						params
					});
				}
				uni.hideLoading()
				if (res.data.code != 200) {

					return;
				}
				this.$forceUpdate()
				this.getDetail()
			},
			async like1(item, type) {

				let user = storage.getUserInfo();

				uni.showLoading({
					title: "操作中",
					mask: true
				})
				let params = {

				}
				let ids = [item.mydz]
				let res = await http.request({
					url: "/lili/liQuestionsFabulous/" + ids,
					method: Method.DELETE,
					needToken: true,
					params
				});

				uni.hideLoading()
				if (res.data.code != 200) {

					return;
				}
				this.$forceUpdate()
				this.getDetail()
			},
			// 新增评论
			async add() {
				if (this.content == null || this.content.length < 2) {
					uni.showToast({
						title: '评论内容过短',
						duration: 2000
					});
					return
				}
				let user = storage.getUserInfo();

				uni.showLoading({
					title: "回复中",
					mask: true
				})
				let params = {
					content: this.content,
					createUserName: user["nickName"],
					createUserHread: user["face"],
					industryId: this.title.industryId,
					questionsId: this.id,
					huifuren: this.pUser,
					leavel: this.leavel ? 2 : 1,
					userId: user.id
				}
				if (this.pid) {
					params["parentId"] = this.pid;
				}
				let res = await http.request({
					url: "/lili/liQuestionsDetail",
					method: Method.POST,
					needToken: true,
					params
				});
				uni.hideLoading()
				if (res.data.code != 200) {
					return;
				}
				this.submit = false;
				this.$forceUpdate()
				this.getDetail()

			},

			huidazi(item, each) {
				if (item) {
					this.pUser = each.createUserName;
					this.pid = item.id
					this.leavel = each.leavel;
				}
			},
			huida(item) {
				if (item) {
					this.pUser = item.createUserName;
					this.pid = item.id
					this.leavel = item.leavel;
				} else {
					this.pUser = this.title.createUserName;
					this.pid = null;
					this.leavel = 1;
				}
				this.submit = true;
			},
			// 没用的方法，但不要删
			stopPrevent() {},
			// 输入框失去焦点
			blur() {
				this.focus = false;
			},
			// 输入框聚焦
			focusOn() {
				this.$emit('focusOn');
			},
			// 标签关闭
			tagClose() {
				this.showTag = false;
				this.pUser = null;
				this.commentReq.pId = null;
			},
			// 输入评论
			commentInput() {
				// TODO 调起键盘方法
				this.submit = true;
				setTimeout(() => {
					this.focus = true;
				}, 50)
			},
			// 关闭输入评论
			closeInput() {
				this.focus = false;
				this.submit = false;
			},
			getTimeFormat(timeLong) {

				let now = moment()
				let time = moment(timeLong);
				let minute = now.diff(time, "minute");
				let hour = now.diff(time, "hour");
				let day = now.diff(time, "day");
				// if(day==0 && hour==0 && minute<=60){
				// 	return minute+"分钟前"
				// }
				// if(day==0 && hour<=24){
				// 	return hour+"小时"+minute+"分钟前";
				// }
				// if(day<=30){
				// 	return day+"天"+hour+"小时"+minute+"分钟前"
				// }
				return time.format("YYYY-MM-DD HH:mm");
			},
			async getDetail() {
				let user = storage.getUserInfo();
				if (!user) {
					user = {
						"id": 0
					}
				}
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let res = await http.request({
					url: "/lili/liQuestions/" + this.id + "/" + user.id,
					method: Method.GET,
					needToken: true,
				});

				let data = res.data.result || {};
				if (res.data.result) {
					this.arr = data.details || []
				}
				this.title = {
					...data
				}
				// if(data.appointUser){
				// 	if(data.appointUser==user.id){
				// 		this.isAnswer=true;
				// 	}
				// }

				this.$forceUpdate()
				uni.hideLoading()
				console.log("showHangyeList", data)
			},
			back() {
				let pageStack = getCurrentPages();
				if (pageStack.length == 1) {
					uni.reLaunch({
						url: "/pages/home/loading/loading"
					})
				} else {
					uni.navigateBack({
						delta: 1,
					})
				}

			},

		},
	}
</script>

<style lang="scss" scoped>
	.bf_input_down::after {
		border: none;
	}

	.fixed {
		position: fixed;
		z-index: 99;
		width: 100%;

		.status-bar {
			position: absolute;
			top: var(--status-bar-height);
			color: #fff;
			width: 100%;
			font-size: 36rpx;
			left: 20rpx;
			right: 0;
			height: 60rpx;
			line-height: 60rpx;

			.title {
				margin-left: 30%;
			}
		}

		.question-card {
			position: absolute;
			top: calc(var(--status-bar-height) + 60rpx + 30rpx);
			bottom: 0;
			width: calc(100% - 32rpx);
			padding: 0 30rpx;
			margin: 0 16rpx;
			background: #FFFFFF;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			font-size: 28rpx;
			z-index: 100;
			height: calc(100vh - var(--status-bar-height) - 90rpx);
			overflow-y: scroll;

			.qes {
				padding: 30rpx 0;
				font-weight: bolder;
				line-height: 50rpx;
				font-size: 32rpx;
			}

			.info {
				font-size: 22rpx;
				color: #999999;
				width: calc(100% - 0rpx);
				align-items: baseline;

				.avatar {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					position: relative;
					top: 10rpx;
				}

				.nickname {
					margin: 0 20rpx;
					font-size: 28rpx;
					font-weight: bolder;
					color: #333333
				}

				.icon {
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

			}

			.line {
				height: 8rpx;
				margin: 30rpx 0;
				background: #F1F2F3;
				width: 100%;
			}

			.question-all {
				font-size: 32rpx;

				.zonggong {
					font-weight: bold;
				}

				.question-list {
					.question-item {
						padding: 30rpx 0 15rpx;
						align-items: initial;
						color: #333333;
						border-bottom: 1rpx solid #DBDDE0;

						.teacher {
							width: 72rpx;
							height: 72rpx;
							position: absolute;
							top: 20rpx;

							.photo {
								width: 72rpx;
								height: 72rpx;
								border-radius: 50%;

							}
						}

						.right-content {
							width: calc(100% - 72rpx);
							padding-left: 20rpx;
							font-size: 30rpx;
							margin-left: 72rpx;

							.name {
								color: #795CA0;
								padding: 15rpx 0;
							}

							.teacher-qes {
								margin-bottom: 15rpx;
							}

							.answer-list {
								align-items: baseline;

								.answer-item {
									background: #F1F2F3;
									padding: 15rpx 15rpx;
									// border-bottom: 1rpx solid #CFCFCF;

									.person {
										color: #999999;
										font-size: 24rpx;

										.nickname {
											color: #795CA0;
										}
									}
								}

							}

							.qingkuang {
								width: 100%;
								color: #999999;
								font-size: 24rpx;
								margin-top: 15rpx;
								align-items: baseline;
								position: relative;

								.number {
									margin-left: 4rpx;
									// margin: 0 15rpx;
								}

								.number1 {
									margin-right: 0;
								}
							}
						}
					}
				}
			}
		}
	}

	.tabbar {
		position: fixed;
		bottom: 30rpx;
		width: calc(100% - 52rpx);
		margin: 0 26rpx;
		z-index: 10000;
		padding: 30rpx 0;
		box-shadow: 0rpx 2rpx 22rpx 2rpx rgba(0, 0, 0, 0.28);
		border-radius: 100rpx;
		background: rgba(255, 255, 255, 0.28);
		backdrop-filter: blur(30rpx);

		.action1 {
			border-left: 1rpx solid #999999;
			border-right: 1rpx solid #999999;
		}

		.wenzi {
			margin-left: 10rpx;
		}
	}

	.hb-comment {
		padding: 10rpx;
	}

	.top-read {
		font-size: 28rpx;
		padding-left: 10rpx;
		color: #999999;
	}

	.seg_line_box {
		display: flex;
		height: 5rpx;
		justify-content: space-between;
		margin: 5rpx 0;
	}

	.seg_line {
		width: 45%;
		border-bottom: 1rpx solid #e1e1e1;
	}

	.seg_dot {
		width: 8%;
		border-bottom: 5rpx dotted #dbdbdb;
	}

	.comment-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.comment-box {
		padding: 10rpx 0;
	}

	.comment-box-item {
		display: flex;
	}

	.comment-main {
		padding-left: 20rpx;
	}

	.comment-main-top {
		width: 600rpx;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.sub-comment-main-top {
		width: 510rpx;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.nick-name-box {
		display: flex;
		align-items: center;
	}

	.comLogo {
		margin-right: 18rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		color: #FFFFFF;
	}

	.com1 {
		background-color: #d218b1;
	}

	.com2 {
		background-color: #f19c0b;
	}

	.com3 {
		background-color: #c8da85;
	}

	.com4 {
		background-color: #bfd0da;
	}

	.nick-name {
		color: #2d8cf0;
	}

	.isLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #2d8cf0;
	}

	.notLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #999999;
	}

	.comment-main-content {
		padding: 10rpx 10rpx 10rpx 0;
	}

	.comment-main-foot {
		display: flex;
		font-size: 22rpx;
	}

	.replayTag {
		color: #909399;
		margin-bottom: 5px;
		border: 1px solid #c8c9cc;
		background-color: #f4f4f5;
		border-radius: 3px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16rpx;
		padding: 5px 10px;
	}

	.replyTagClose {
		font-size: 20px;
		line-height: 12px;
		padding: 0 0 2px 5px;
	}

	.foot-btn {
		padding-left: 10rpx;
		color: #007AFF;
	}

	.comment-sub-box {
		padding: 20rpx 0;
	}

	.comment-sub-item {
		display: flex;
	}

	.comment-none {
		padding: 20rpx;
		width: 100%;
		text-align: center;
		color: #999999;
	}

	.comment-submit-box {
		position: fixed;
		display: flex;
		align-items: flex-end;
		z-index: 9900;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);
		width: 100%;
	}

	.comment-add {
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		padding: 5rpx;
		border: 1px solid #ddd;
		transition: .3s;
		-webkit-transition: .3s;
	}

	.btn-click {
		color: #007AFF;
		font-size: 28rpx;
		padding: 10rpx;
	}

	.cancel {
		color: #606266;
	}

	.textarea {
		height: 400rpx;
		padding: 16rpx;
		width: 100%;
	}

	.comment-submit {
		padding: 5rpx 20rpx 0 20rpx;
		border-bottom: 1px dashed #ddd;
		width: calc(100% - 40rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
